<template>
	<view class="staffData-container">
		<!-- tab类型切换 -->
		<view class="typeTab-box">
			<view @click="switchTab(item)" v-for="item in typeTabList" :key="item.type" :class="{ 'typeTab-item': true, activeTab: currentTab.type == item.type }">
				{{ item.name }}
			</view>
		</view>

		<!-- 页面主体 -->
		<view class="page-body">
			<z-paging ref="paging" :fixed="false" v-model="staffDataList" @query="queryList">
				<template #loadingMoreNoMore>
					<div style="text-align: center; color: #999; padding-bottom: 24rpx">没有更多了</div>
				</template>

				<template #empty></template>

				<view v-for="item in 12" :key="item" class="data-item">
					<view class="item-top">
						<view class="name">啦啦啦</view>
						<view class="phone">13999999999</view>
					</view>
					<view class="item-bottom">
						<view class="role-item">
							<view class="all-store-num bottom-item">
								<view v-if="false" class="item-label">商户总数</view>
								<view class="item-label">安装设备总数</view>
								<view class="item-value">10</view>
							</view>
							<view class="new-store-num bottom-item">
								<view v-if="false" class="item-label">新增商户</view>
								<view class="item-label">新增安装设备</view>
								<view class="item-value">10</view>
							</view>
						</view>

						<!-- 属于巡检员的业务员数据模块 -->
						<view v-for="(salesman, salesmanIndex) in 3" :key="salesmanIndex" class="salesman-box">
							<view class="item-top">
								<view class="name">啦啦啦</view>
								<view class="phone">13999999999</view>
							</view>

							<view class="item-bottom">
								<view class="role-item">
									<view class="all-store-num bottom-item white">
										<view v-if="false" class="item-label">商户总数</view>
										<view class="item-label">安装设备总数</view>
										<view class="item-value">10</view>
									</view>
									<view class="new-store-num bottom-item white">
										<view v-if="false" class="item-label">新增商户</view>
										<view class="item-label">新增安装设备</view>
										<view class="item-value">10</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>

	<!-- 选择时间日历 -->
	<u-calendar
		v-model="dateShow"
		@change="dateChange"
		mode="range"
		:min-date="minDate"
		:max-date="maxDate"
		border-radius="48"
		:btnCustomStyle="{ background: '#00C582' }"
		active-bg-color="#00C582"
		range-bg-color="rgba(0, 197, 130, .1)"
		range-color="#00C582"
		:safe-area-inset-bottom="true"
	></u-calendar>
</template>

<script setup>
import { ref } from 'vue';

// 类型切换列表
const currentTab = ref({ type: 0 });
const typeTabList = ref([
	{
		name: '今日',
		type: 0
	},
	{
		name: '昨日',
		type: 1
	},
	{
		name: '近七日',
		type: 2
	},
	{
		name: '近30日',
		type: 3
	},
	{
		name: '自定义',
		type: 4
	}
]);

// 切换tab类型
const switchTab = (item) => {
	console.log(item);
	currentTab.value = item;

	if (item.name == '自定义') {
		dateShow.value = true;
	}
};

// 自定义日期选择
const dateShow = ref(false);
const minDate = ref('2000-01-01');
const maxDate = ref('2099-12-31');
const dateChange = (e) => {
	console.log(e);
};

// 员工数据列表查询
const staffDataList = ref([]);
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
	console.log(pageNo, pageSize);
	paging.value.complete([1, 2, 3, 4]);
};
</script>

<style lang="scss" scoped>
.staffData-container {
	height: 100vh;
	padding: 24rpx;
	background-color: #f9f9f9;

	.typeTab-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;

		.typeTab-item {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			width: 124rpx;
			height: 52rpx;
			border-radius: 30rpx;
			background-color: #fff;
		}

		.activeTab {
			color: #fff;
			background-color: $uni-main-color;
		}
	}

	.page-body {
		height: calc(100vh - 52rpx - 24rpx - 48rpx);
		border-radius: 20rpx;

		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.data-item,.salesman-box {
			padding: 24rpx;
			border-radius: 24rpx;
			background-color: #fff;
			margin-bottom: 24rpx;

			.item-top {
				color: #333;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 24rpx;
				border-bottom: 1rpx solid #f0f0f0;

				.name {
					font-size: 32rpx;
					line-height: 44rpx;
					font-weight: 500;
				}

				.phone {
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}

			.item-bottom {
				color: #333;
				padding-top: 24rpx;

				.role-item {
					flex: 1;
					display: flex;
					gap: 22rpx;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 24rpx;

					.bottom-item {
						flex: 1;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						justify-content: space-between;
						height: 80rpx;
						padding: 0 20rpx;
						font-size: 32rpx;
						font-weight: 500;
						line-height: 44rpx;
						border-radius: 16rpx;
						background-color: #f9f9f9;

						.item-label {
							color: #999;
							font-size: 24rpx;
						}

						.item-value {
							color: #333;
							font-size: 28rpx;
							font-weight: 500;
						}
					}
				}

				.salesman-box {
					background-color: #f9f9f9;
					margin-bottom: 24rpx;
					
					&:first-child {
						margin-bottom: 0;
					}
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.role-item {
						margin-bottom: 0;
					}
					
					.white {
						background-color: #fff;
					}
				}
			}
		}
	}
}

:deep(.u-calendar__bottom__btn) {
	.u-btn--primary--disabled {
		border-color: rgba(0, 197, 130, .5) !important;
		background-color: rgba(0, 197, 130, .5) !important;
	}
}
</style>
